<template>
  <Col :span="span" class="filed-col">
    <div class="label">
      <label v-text="name"></label>
    </div>
    <div class="value">
      <slot></slot>
    </div>
  </Col>
</template>
<script>
export default {
  name: "filed",
  props: {
    name: {
      type: String
    },
    span: {
      type: Number,
      default: 12
    }
  }
};
</script>
<style lang="less">
.detail {
  display: table;
  // height: 100%;
  border-collapse: collapse;
  background: white;
  .ivu-row {
    border: 1px solid #ddd;
    border-top: none;
    height: 100%;
    .filed-col {
      border: 1px solid #ddd;
      border-right: none;
      margin: 0 -1px -1px -1px;
      // box-sizing: border-box;
      display: flex;
      flex-direction: row;
      line-height: 40px;
      > .label {
        background: #f7f7f7;
        flex-grow: 0;
        width: 120px;
        text-align: right;
        padding: 0 8px;
        border-right: 1px solid #ddd;
        flex-shrink: 0;
      }
      > .value {
        word-break: break-all;
        word-wrap: break-word;
        flex-grow: 1;
        padding-left: 10px;
        > div {
          line-height: 30px;
        }
      }
    }
  }
}
.new-detail {
  .ivu-row {
    width: 100% !important;
    .filed-col {
      box-sizing: border-box;
      line-height: 70px;
      display: flex;
      flex-direction: row;
      > .label {
        display: inline-block;
        width: 100px;
        text-align: right;
        line-height: 40px;
        height: 100%;
        font-weight: bold;
      }
      > .value {
        text-align: left;
        height: 100%;
        word-break: break-all;
        word-wrap: break-word;
        line-height: 20px;
        padding-top: 10px;
      }
    }
  }
}
</style>